<template>
  <div
    :style="{ width: width, height: height, background: background }"
    style="position: relative"
    class="bpmnDetail"
  >
    <div ref="container" style="width: 100%; height: 100%" />
  </div>
</template>

<script>
import BpmnViewer from 'bpmn-js/lib/Viewer'
import 'diagram-js/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
export default {
  name: 'BpmnDisplay',
  props: {
    height: {
      type: String,
      default: '100%'
    },
    width: {
      type: String,
      default: '100%'
    },
    background: {
      type: String,
      default: '#FFFFFF'
    },
    xml: {
      type: String,
      required: true
    },
    activeNode: {
      type: Array,
      required: false
    }
  },
  mounted() {
    const that = this
    const xml = this.xml ? this.xml : this.defaultXml

    this.bpmnModeler = new BpmnViewer({
      container: that.$refs.container,
      additionalModules: []
    })
    this.bpmnModeler.importXML(xml).then(() => {
      const bpmnCanvas = this.bpmnModeler.get('canvas')
      bpmnCanvas.zoom('fit-viewport')
      if (this.activeNode) {
        this.activeNode.forEach((a) => {
          bpmnCanvas.addMarker(a, 'highlight')
        })
      }
    })
  }
}
</script>
<style scoped lang="less">
.bpmnDetail:deep(.bjs-powered-by) {
  display: none;
}
.bpmnDetail:deep(.djs-palette-entries) {
  display: none;
}
.bpmnDetail:deep(.djs-palette) {
  display: none;
}
</style>
<style lang="less">
.djs-popup-backdrop {
  z-index: 9999;
}
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: #13c2c2 !important; /* color elements as green */
}
</style>
